import { Component, OnInit, Inject, ViewChild } from "@angular/core";
import { PLATFORM_ID, APP_ID } from "@angular/core";
import { isPlatformBrowser, isPlatformServer } from "@angular/common";
import { LocaleService, TranslationService, Language } from "angular-l10n";
import { Title } from "@angular/platform-browser";
import { Direction } from "@angular/cdk/bidi";
import { MatMenuTrigger } from "@angular/material";

@Component({
  selector: "app-l10n",
  templateUrl: "./l10n.component.html",
  styleUrls: ["./l10n.component.scss"]
})
export class L10nComponent implements OnInit {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

  countryMenuItems: any[] = [
    {
      text: "English",
      language: "en",
      country: "US",
      numberingSystem: "latn"
    },
    {
      text: "简体中文",
      language: "zh",
      country: "CN",
      numberingSystem: "latn"
    }
    // {
    //   text: "Germany",
    //   language: "de",
    //   country: "DE",
    //   numberingSystem: "latn"
    // }
  ];

  show = false;

  get mapCountryMenuItems() {
    const ret = {};
    for (const item of this.countryMenuItems) {
      ret[item.country] = item;
    }
    return ret;
  }

  sub$ = {
    defaultLocaleChanged$: null
  };

  get currentCountry(): string {
    return this.locale.getCurrentCountry();
  }

  get currentNumberingSystem(): string {
    return this.locale.getCurrentNumberingSystem();
  }

  dir: Direction;

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    public locale: LocaleService,
    public translation: TranslationService,
    public title: Title
  ) {}

  onMouseEnter(e) {
    this.show = true;
  }

  onMouseLeave(e) {
    this.show = false;
  }

  toggleMenu() {
    this.show = !this.show;
  }

  ngOnInit() {
    this.translation.translationChanged().subscribe(() => {
      this.title.setTitle(this.translation.translate("App.Title"));
      this.dir = this.locale.getLanguageDirection() as Direction;
    });
    // Changes currency when default locale changes and for localized routing.
    this.sub$.defaultLocaleChanged$ = this.locale.defaultLocaleChanged.subscribe(
      () => {
        switch (this.locale.getCurrentLocale()) {
          case "en-US":
            this.locale.setCurrentCurrency("USD");
            break;
          case "zh-CN":
            this.locale.setCurrentCurrency("CNY");
            break;
          case "de-DE":
            this.locale.setCurrentCurrency("EUR");
            break;
        }
      }
    );
    // const item = this.countryMenuItems[1];
    // this.locale.setCurrentLanguage("en");
    // this.locale.sendDefaultLocaleEvents();
    // Initialzes numbering system for localized routing.
    // switch (this.locale.getCurrentLocale()) {
    //   case "en-US":
    //     this.locale.setCurrentNumberingSystem("latn");
    //     break;
    //   case "zh-CN":
    //     this.locale.setCurrentNumberingSystem("latn");
    //     break;
    //   case "de-DE":
    //     this.locale.setCurrentNumberingSystem("latn");
    //     break;
    // }
  }

  selectLocale(
    language: string,
    country: string,
    numberingSystem: string
  ): void {
    this.locale.setDefaultLocale(language, country, "", numberingSystem);
    this.show = false;
    console.log(this.trigger, 9999);
  }
}
